<script setup lang='ts'>
// hooks 其实就是函数使用的是 use 开头，hooks 只能在最外层使用
import { useRouter, useRoute } from 'vue-router'

import {useUserStore} from '../../stores/user'

const user = useUserStore()

// 获取到页面跳转的方法
const router = useRouter()

function loginClick(){
  
  // this.$router.push('/login')
  router.push('/login')
}

// 退出登录
function logoutClick(){
  localStorage.clear()

  user.changeUserState({
    loginState: false,
    userid: '',
    token: ''
  })

}
</script>
<template>
    <main class='box'>
      <header class='header'>
        头部-用户
      </header>

      <div class='content'>
      
        <van-button v-if="!user.loginState" @click="loginClick" size="small" type="default">请登录</van-button>
        <van-button v-else @click="logoutClick" size="small" type="default">退出登录</van-button>


      </div>
    </main>
</template>
<style scoped lang="scss">
    
</style>